<!DOCTYPE html>
<html lang="en" class="h-100">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>登录界面</title>
		<link rel="stylesheet" href="bootstrap/css/bootstrap.css" />
		<style></style>
	</head>

	<body class="h-100 d-flex justify-content-center align-items-center">
		<form style="width: 400px">
			<h1 class="text-center">GRTS-MMS</h1>
			<div class="mb-3">
				<input
					type="text"
					class="form-control"
					placeholder="帐号"
					v-model="username"
				/>
			</div>
			<div class="mb-3">
				<input
					type="password"
					class="form-control"
					placeholder="密码"
					v-model="password"
				/>
			</div>
			<button @click="handleLogin" type="button" class="btn btn-primary w-100">
				登 录
			</button>
		</form>

		<script src="bootstrap/js/bootstrap.bundle.js"></script>
		<script src="vue/vue.js"></script>
		<script>
			const app = new Vue({
				el: "form",
				data: {
					username: "",
					password: "",
				},
				methods: {
					handleLogin() {
						// 调用window.fetch()发送异步请求
						fetch("http://localhost:8080/user/login", {
							method: "POST",
							headers: {
								"Content-Type": "application/x-www-form-urlencoded",
							},
							body: `username=${this.username}&password=${this.password}`,
						}).then((response) => {
							if (response.status === 200) {
								response.json().then((user) => {
									console.log(user);
									sessionStorage.setItem("CURRENT_USER", JSON.stringify(user));
									location.href = "home.html";
								});
							} else {
								alert("登录失败，请检查帐号或密码");
							}
						});
					},
				},
			});
		</script>
	</body>
</html>
